iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
自我挑戰組

第12 屆IT鐵人賽 -Python新手玩玩Web應用系列 第 6

{Day6}網網相連到天邊,談談API網路資料串接!

  • 分享至 

  • xImage
  •  

第6章 引用其他網站提供的開放資料來強化自己的網頁內容

開始之前,談談API吧

引述來自維基的話:

什麼是API:
應用程式介面(英語:Application Programming Interface),縮寫為API
,是一種計算介面,它定義了多個軟體中介之間的互動。它定義了可以進行的呼叫(call)
或請求(request)的種類,如何進行呼叫或發出請求,應使用的資料格式,應遵循的慣例等。
它還可以提供擴充機制,以便用戶可以通過各種方式對現有功能進行不同程度的擴充。
一個API可以是完全客製化的,針對某個組件的,也可以是基於行業標準設計的以確保互操作性。
通過資訊隱藏,API實現了模組化編程,從而允許用戶實現獨立地使用介面。

API 如何產生?
大致流程是 (如果有錯誤的地方還請指正)

  1. 由程式設計師從私人或政府的資料庫中的資料提取資料
  2. 打包成一個應用程式介面
  3. 放到指定路徑上供前端網頁或客戶進行連接下載

我們如何使用它?
在Python,操作API的方法大都藉由urllib3 或requests套件向提供的伺服器進行請求,取得對應的資料之後
就可以利用它做數據呈現在我們的網頁嚕

---準備工作的分隔線-----

為了取得氣象資料,到中央氣象局氣象資料開放平臺 註冊吧。
在Pycharm 的terminal 視窗輸入
pip install requests

---闕始寫程式吧--------

修改我們的app.py,建立一個和氣象局連接的函式
資料來源:
中央氣象局開放資料平臺之資料擷取API
使用說明:
API利用/開發指南說明

from flask import Flask,redirect,render_template,request
from flask_bootstrap import Bootstrap
import requests

app = Flask(__name__)
bootstrat = Bootstrap(app)

@app.route('/')
def index():
    dom = requests.get(
        "https://opendata.cwb.gov.tw/api/v1/rest/datastore/O-A0003-001?Authorization=<your apply token>&format=JSON"
    ).json()

    location = dom['records']['location'][11]['parameter'][0]['parameterValue']
    temp = dom['records']['location'][11]['weatherElement'][3]['elementValue']
    Name = dom['records']['location'][11]['weatherElement'][3]['elementName']
    print(location + temp +":"+Name)
    return render_template('index.html',location=location,temp=temp,Name=Name)

@app.route('/user/<name>')
def user(name):
    return '<h1>Hello,{}</h1>'.format(name)


if __name__ == '__main__':
    app.run()

稍稍修改了一下index.html,把從API引入的資料導成變數

{% extends "base.html" %}
{% block head %}
    <script>
        function startTime() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('clock').innerHTML =
                h + ":" + m + ":" + s;
            var t = setTimeout(startTime, 500);
        }

        function checkTime(i) {
            if (i < 10) {
                i = "0" + i
            }
            ;  // add zero in front of numbers < 10
            return i;
        }
    </script>

{% endblock %}
{% block content %}
    <h1>我的工作清單網站</h1>
    <h2>現在時間

        <body onload="startTime()">
        <div id="clock"></div>
    </h2>
    <div class="container">

        <h1>{{ location }}</h1>
        <h1>{{ Name }}:{{ temp }}</h1>
    </div>
{% endblock content %}

今天就變成這樣了呦https://ithelp.ithome.com.tw/upload/images/20200906/201250654QW5Aol7zY.png


上一篇
{Day5}樣板大神幫幫我!!
下一篇
{Day7}Method GET /POST & 表單
系列文
第12 屆IT鐵人賽 -Python新手玩玩Web應用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言